<template>
	<view class="content">		
		<!-- 聊天内容 -->
		<scroll-view class="chat" @click="hide" scroll-y="true" scroll-with-animation="true" :scroll-into-view="scrollToView">
			<view class="chat-main" :style="{paddingBottom: inputh +'px'}">
				<view class="chat-ls" v-for="(item,index) in unshiftmsg" :key="index" :id="'msg'+ index">
					<!-- 时间 -->
					<view class="chat-time" v-if="item.date != null">{{ item.date }}</view>
					
					<!-- 对方 -->
					<view class="msg-m msg-left" v-if="item.chatType == 1">
						<view class="message message-l" v-if="item.contentType == 0">
							<view class="msg-text">{{item.content}}</view>
							<view class="time-left">{{ item.time }}</view>
						</view>
						<view class="message message-l" v-if="item.contentType == 1" @tap="previewImg(item.content)">
							<image :src="item.content" class="msg-img" mode="widthFix"></image>
							<view class="time-left">{{ item.time }}</view>
						</view>
					</view>
					
					<!-- 我 -->
					<view class="msg-m msg-right" v-if="item.chatType == 0">
						<view class="message message-r" v-if="item.contentType == 0">
							<view class="msg-text">{{ item.content }}</view>
							<view class="time-right">{{ item.time }}</view>
						</view>
						<view class="message message-r" v-if="item.contentType == 1" @tap="previewImg(item.content)">
							<image :src="item.content" class="msg-img" mode="widthFix"></image>
							<view class="time-right">{{ item.time }}</view>
						</view>
					</view>
				</view>
			</view>
		</scroll-view>
		
		<submit @inputs="inputs" @heights="heights" ref="submit"></submit>
	</view>
</template>

<script>
	import submit from './submit.vue';
	import dateTime from '/utils/dateTime.js';
	import wsRequest from '/utils/websocket.js';

	export default {
		data() {
			return {
				friendId: "xpq",
				msg: [],
				// 反转数据接收
				unshiftmsg: [],
				imgMsg: [],
				scrollToView: '',
				oldDate: '',
				oldTime: new Date(),
				inputh: '90',
				
				websocket: null,
				tid: null,  //主题id
				uid: null,  //用户id
				user: null  //用户信息
			}
		},
		onLoad(option) {
			this.tid = option.tid == undefined ? -1 : option.tid
			this.uid = option.uid == undefined ? -1 : option.uid
			if (option.tname != undefined) {
				uni.setNavigationBarTitle({
					title: option.tname
				})
			} else if (option.uname != undefined) {
				uni.setNavigationBarTitle({
					title: option.uname
				})
			}
			this.user = uni.getStorageSync('user')
			this.initSocket()
			setTimeout(() => {
				this.goBottom()
			}, 400)
		},
		onUnload() {
			this.websocket.close()
		},
		components: { submit },
		methods: {
			initSocket() {
				let url = this.$request.wsUrl + this.uid + '/' + this.tid
				if (this.user.type == 0) {
					url = url + '/' + 'u'
				} else {
					url = url + '/' + 't'
				}
				this.websocket = new wsRequest(url, 5000)
				// 接收消息
				this.websocket.getMessage(res=>{
					let msg = JSON.parse(res.data);
					
					// 数组倒叙 主要是应对后端传过来的数据
					for (var i = 0; i < msg.length; i++) {
						// 获取图片，为下面的预览做准备
						if (msg[i].contentType == 1) {
							msg[i].content = this.$request.baseUrl + msg[i].content
							this.imgMsg.push(msg[i].content)
						}
						if (this.user.type == 1) {
							msg[i].chatType = msg[i].chatType == 0 ? 1 : 0
						}
						this.unshiftmsg.push(msg[i]);
					}
					console.log(this.unshiftmsg);
					// 跳转到最后一条数据 与前面的:id进行对照
					// this.$nextTick(function() {
					// 	this.scrollToView = 'msg' + (this.unshiftmsg.length - 1)
					// })
				})
			},
			
			// 进行图片的预览
			previewImg(e) {
				let index = 0;
				for (let i = 0; i < this.imgMsg.length; i++) {
					if (this.imgMsg[i] == e) {
						index = i;
					}
				}
				// 预览图片
				uni.previewImage({
					current: index,
					urls: this.imgMsg,
					longPressActions: {
						itemList: ['发送给朋友', '保存图片', '收藏'],
						success: function(data) {
							console.log('选中了第' + (data.tapIndex + 1) + '个按钮,第' + (data.index + 1) + '张图片');
						},
						fail: function(err) {
							console.log(err.errMsg);
						}
					}
				});
			},
			//接受输入内容
			inputs(e) {
				console.log(e)
				let data = {
					"tid": this.tid,
					"uid": this.uid,
					"content": e.message,
					"contentType": e.type,
					"chatType": this.user.type,
					"createTime": new Date(),
					// "date": "今天",
					"time": new Date().getHours() + ':' + new Date().getMinutes()
				};
				// if (this.user.type == 0) {
				// 	data.tid = this.youId
				// 	data.uid = this.user.id
				// } else {
				// 	data.tid = this.user.id
				// 	data.uid = this.youId
				// }
				console.log(data);
				// 发送给服务器消息
				this.websocket.send(JSON.stringify(data));
				
				if (e.type == 1) {
					data.content = this.$request.baseUrl + e.message
				}
				data.chatType = 0
				this.unshiftmsg.push(data);
				// 跳转到最后一条数据 与前面的:id进行对照
				this.$nextTick(function() {
					this.scrollToView = 'msg' + (this.unshiftmsg.length - 1)
				})
				if (e.type == 1) {
					this.imgMsg.push(this.$request.baseUrl + e.message);
				}
			},
			//输入框高度
			heights(e) {
				console.log("高度:", e) 
				this.inputh = e;
				this.goBottom();
			},
			// 滚动到底部
			goBottom() {
				this.scrollToView = '';
				this.$nextTick(function() {
					this.scrollToView = 'msg' + (this.unshiftmsg.length - 1)
				})
			},
			// 隐藏submit
			hide() {
				// this.websocket.send(JSON.stringify('一条消息'));
				this.$refs.submit.hide()
				// this.heights(100)
				this.inputh = '90';
			}
		}
	}
</script>

<style lang="scss">
	page {
		height: 100%;
	}

	.content {
		height: 100%;
		background-color: rgba(244, 244, 244, 1);
	}

	.chat {
		height: 100%;

		.chat-main {
			padding-left: 32rpx;
			padding-right: 32rpx;
			padding-top: 20rpx;
			// padding-bottom: 120rpx;  //获取动态高度
			display: flex;
			flex-direction: column;
		}

		.chat-ls {
			.chat-time {
				font-size: 24rpx;
				color: rgba(39, 40, 50, 0.3);
				line-height: 34rpx;
				padding: 10rpx 0rpx;
				text-align: center;
			}

			.msg-m {
				display: flex;
				padding: 20rpx 0;

				.user-img {
					flex: none;
					width: 80rpx;
					height: 80rpx;
					border-radius: 20rpx;
				}

				.message {
					flex: none;
					max-width: 560rpx;
					display: flex;
					flex-direction: column;
				}
				.msg-text {
					font-size: 28rpx;
					color: rgba(39, 40, 50, 1);
					line-height: 44rpx;
					padding: 18rpx 24rpx;
				}
				.msg-img {
					max-width: 400rpx;
					border-radius: 20rpx;
				}
			}

			.msg-left {
				flex-direction: row;
				.msg-text {
					margin-left: 16rpx;
					background-color: #fff;
					border-radius: 0rpx 20rpx 20rpx 20rpx;
				}
				.ms-img {
					margin-left: 16rpx;
				}
				.message-l {
					align-items: flex-start;
				}
				.time-left {
					font-size: 20rpx;
					margin-left: 20rpx;
					margin-top: 10rpx;
					color: rgba(39, 40, 50, 0.3);
				}
			}

			.msg-right {
				flex-direction: row-reverse;
				.msg-text {
					color: #fff;
					margin-right: 16rpx;
					background-color: #008676;
					border-radius: 20rpx 0rpx 20rpx 20rpx;
				}
				.ms-img {
					margin-right: 16rpx;
				}
				.message-r {
					align-items: flex-end;
				}
				.time-right {
					font-size: 20rpx;
					margin-right: 20rpx;
					margin-top: 10rpx;
					color: rgba(39, 40, 50, 0.3);
				}
			}
		}
	}
</style>
